<script setup>
import {defineProps} from 'vue'
import {useRouter} from "vue-router";

const router = useRouter()
const props = defineProps({
	recommends: {
		type: Array,
		default() {
			return []
		}
	}
})
const goD = (id) => {
	router.push({path: '/detail', query: {id}})
}
</script>

<template>
	<div class="recommend">
		<div v-for="item in props.recommends.slice(0,4)" :key="item.id" class="recommend-item">
			<a href="" @click.prevent="goD(item.id)">
				<img v-lazy="item['cover_url']" alt="">
				<div>{{ item.title }}</div>
			</a>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.recommend {
	width: 100%;
	display: flex;
	text-align: center;
	padding: 15px 0 30px;
	border-bottom: 8px solid #EEEEEE;
	font-size: 12px;
}

.recommend-item {
	flex: 1;

	img {
		width: 70px;
		height: 70px;
		margin-bottom: 10px;
	}
}

</style>